<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close"
  >
    <div id="gantt" style="height: 120px"></div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import * as echarts from 'echarts'
  import { getOrderGantt } from '../../../api/order/getOrderGantt'
  import { getCookie } from '../../../utils/cookie'
  export default {
    name: 'GanttTable',
    data() {
      return {
        orderId: '',
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {
      this.getGantt()
    },
    methods: {
      showGantt(orderId) {
        this.title = '订单甘特图 ' + orderId
        this.orderId = orderId
        this.dialogFormVisible = true
        this.getGantt()
      },
      close() {
        this.orderId = ''
        this.dialogFormVisible = false
      },
      getGantt() {
        getOrderGantt(getCookie('cur_date'), this.orderId).then((res) => {
          let data = []
          for (let i = 0; i < res.length; i++) {
            let item = {
              name: res[i].name,
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'inside',
                formatter: res[i].curRatio + '%',
              },
              itemStyle: {
                opacity: 0.8,
              },
              data: [(res[i].ratio * res[i].curRatio) / 100],
            }
            data.push(item)
            let item2 = {
              name: res[i].name,
              type: 'bar',
              stack: '总量',
              label: {
                show: false,
              },
              itemStyle: {
                opacity: 0,
              },
              data: [(res[i].ratio * (100 - res[i].curRatio)) / 100],
            }
            data.push(item2)
          }
          this.drawGantt(data)
        })
      },
      drawGantt(data) {
        new Promise((resolve) => resolve()).then(() => {
          let myChart = echarts.init(document.getElementById('gantt'))
          let option = {
            legend: {
              data: ['装配', '测试', '印字', '打弹片'],
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true,
            },
            xAxis: {
              type: 'value',
            },
            yAxis: {
              type: 'category',
              data: ['订单进度'],
            },
            series: data,
          }
          myChart.setOption(option)
          myChart.resize()
        })
      },
    },
  }
</script>
